import { Button, Col, Row } from 'antd';
import { useState } from 'react';
import MonacoEditor from 'react-monaco-editor';
import { clone_style } from './style';

const options = {
  selectOnLineNumbers: true
};

const Clone = () => {
  const [editor, setEditor] = useState<any>();
  const [code, setCode] = useState();

  const editorDidMount = (editor: { focus: () => void; }, monaco: any) => {
    editor.focus();
    setEditor(monaco);
  };

  const run = () => {
    const { editor: editorTemp } = editor ?? {};

    if (editorTemp) {
      const model = editorTemp.getModel;
      // const value = model?.getValue?.();

      console.log(111, model)
    }
  }

  return (
    <Row className={clone_style}>
      <Col span={12}>
        <Button onClick={run}>运行</Button>
        <MonacoEditor
          width='100%'
          height='600'
          language='javascript'
          theme='vs-dark'
          value={code}
          options={options}
          editorDidMount={editorDidMount}
        />
      </Col>
      <></>
    </Row>
  )
};

export default Clone;